<template>
    <div>
        <div class="flex-wrap" v-if="propValue.tabIndex == 0 &&!propValue.textType">
            <div class="parent" :style="{width:propValue.boxwidth+'rem','margin':propValue.imgMargin+'rem', 'border-radius':propValue.boxRadius+'rem'}" v-for="(item,i) in propValue.imgList" :key="i">
                <img class="image" :style="{width:propValue.boxwidth+'rem', height:propValue.boxheight+'rem'}"  :src="item.img" alt="">
                <div>
                    <div :class="propValue.tabIndex==0?'text':'whitenowrap'"  :style="{'font-size':propValue.titleSize+'rem',color:propValue.titleColor,'margin-top':propValue.titleTop+'rem','margin-left':propValue.titleLeft+'rem'}">{{item.title}}</div>
                    <div :class="propValue.tabIndex==0?'text':'whitenowrap'" :style="{'font-size':propValue.subtitleSize+'rem',color:propValue.subtitleColor,'margin-top':propValue.contentTop+'rem','margin-left':propValue.contentLeft+'rem'}">{{item.content}}</div>
                </div>
            </div>
        </div>

        <div class="first1 flex-wrap" v-if="propValue.textType">
            <div class="parent parent1" :style="{width:propValue.boxwidth+'rem','margin':propValue.imgMargin+'rem', 
           'border-radius':propValue.boxRadius+'rem'}" v-for="(item,i) in propValue.imgList" :key="i">
                <img class="image" :style="{width:propValue.boxwidth+'rem', height:propValue.boxheight+'rem'}" :src="item.img" alt="">
                <div class="textInner" :style="{'background-image':setBgStyle(propValue.backgroundColor)}">
                    <div :class="propValue.tabIndex==0?'inner_text':'whitenowrap'" :style="{'font-size':propValue.titleSize+'rem',color:propValue.titleColor,'margin-top':propValue.titleTop+'rem','margin-left':propValue.titleLeft+'rem'}">{{item.title}}</div>
                    <div :class="propValue.tabIndex==0?'inner_text':'whitenowrap'" :style="{'font-size':propValue.subtitleSize+'rem',color:propValue.subtitleColor,'margin-top':propValue.contentTop+'rem','margin-left':propValue.contentLeft+'rem'}">{{item.content}}</div>
                </div>
            </div>
        </div>

        <div class="flex-wrap" v-if="propValue.tabIndex == 1 &&!propValue.textType">
            <div class="parent22" :style="{width:propValue.boxwidth+'rem','margin':propValue.imgMargin+'rem','border-radius':propValue.boxRadius+'rem'}" v-for="(item,i) in propValue.imgList" :key="i">
            <div class="imgbox" :style="{width:propValue.boxwidth+'rem', height:propValue.boxheight+'rem'}">
                <img class="image"  :src="item.img" alt="">
            </div>
            <div  class="textInner">
                <div :class="propValue.tabIndex==0?'text':'whitenowrap'"  :style="{'font-size':propValue.titleSize+'rem',color:propValue.titleColor,'margin-top':propValue.titleTop+'rem','margin-left':propValue.titleLeft+'rem'}">{{item.title}}</div>
               <div :class="propValue.tabIndex==0?'text':'whitenowrap'" :style="{'font-size':propValue.subtitleSize+'rem',color:propValue.subtitleColor,'margin-top':propValue.contentTop+'rem','margin-left':propValue.contentLeft+'rem'}">{{item.content}}</div>
            </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    components: {

    },
    props: {
        propValue: {
            type: Object,
            default: {},
        },
        element: {
            type: Object,
            default: () => {},
        },
        swiperList: {
            type: Array,
            default: () => {},
        },
    },
    data() {
        return {

        }
    },
    methods: {
             setBgStyle(color){
                if(!color){
                    return
                }
        // background-image: linear-gradient(30deg, rgba(255, 255, 255, 0.6) 0%, #0E5DC4 100%);
        return 'linear-gradient(30deg,'+color.left +'0%,'+color.right + '100%)!important';
      },
    },
};
</script>

<style lang="scss" scoped>
    .parent {
        // margin: 0 10px 10px 0;
        // margin: 20rem;
        overflow: hidden;
        .image{
            width: 100%;
            height: 100%;
            transition: .5s;
        }
       
        .text {
            // position: relative;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .parent:hover .image{
            cursor: pointer;
            transform: scale(1.15);
        }
    .parent22:hover .image{
        cursor: pointer;
        transform: scale(1.15);
    }
    .parent22 {
        // margin: 0 10px 10px 0;
        // margin: 20rem;
        position: relative;
        .imgbox{
            overflow: hidden;
        }
        .image{
            width: 100%;
            height: 100%;
            transition: .5s;
        }
       
        .text {
            // position: relative;
            width: 100%;
            white-space: wrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
        }
    }

    .parent1 {
        position: relative;
        .textInner {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 10;
            // background-image: linear-gradient(30deg, rgba(255, 255, 255, 0.4) 0%, #0E5DC4 100%);
            .inner_text{
                width: 100%;
                // text-align: center;
                white-space: nowrap;
                overflow: hidden;
                padding:0 10px;
                text-overflow: ellipsis;
            }
            .inner_text2{
                width: 100%;
                // text-align: center;
                white-space: nowrap;
                overflow: hidden;
                padding:0 10px;
                text-overflow: ellipsis;
            }


        }
    }
.whitenowrap{
    width: 100%;
    padding:0 10px;
}
</style>
